<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加元素</title>
    <script src="../../lib/jquery-3.4.1.js"></script>
</head>

<style>

    div{

        width: 100%;
        height: 200px;
        font-weight: normal;

    }

    #div1{

        background-color: yellowgreen;
    }

    #div2{

        background-color: blueviolet;

    }

    p{
        color: red;

    }

    img{
        width: 100px;
        height: 100px;

    }


</style>


<body>

<div id="div1">div1</div>
<div id="div2">

    <ul id="ul1">
        <li>xing</li>
        <li>wei</li>
        <li>xin</li>

    </ul>

</div>


<img src="../../image/3.png">


<hr>
<button class="b1">append结尾插入a链接</button>
<p><b>注:</b>插入的东西在元素内部结尾</p>



<button class="b2">prepend列表开头插入xingweixin</button>
<p><b>注:</b>插入的东西在元素内部结尾</p>


<button class="b3"></button>




<script>


    $(document).ready(function () {

        $(".b1").click(function () {

            $("#div1").append("内部结尾插入的内容 <a href='../../BaseHTML/p段落.html'>跳转链接</a>");

        });

        $(".b2").click(function () {

            $("#ul1").prepend("<li>xingweixin</li>");

        });


    })

</script>




</body>
</html>